<template>
  <div>
    <div style="color: #737373; ">
      湖景餐厅订餐系统
      <el-button style=" float: right; margin-top: 10px;color: whitesmoke; " type="danger" @click="loginOut">
        <i class="el-icon-back"/>退出登录
      </el-button>
      <el-popover
          placement="top-start"
          :title="'姓名 ：'+userInfo.userName"
          width="80"
          trigger="hover"
          :content="'电话 : ' + userInfo.userPhone">
        <el-avatar slot="reference" :size="'medium'" shape="square" fit="scale-down" :src="userInfo.headerUrl"
                   style="float: right;  margin-top: 12px; margin-right: 40px;" @error="errorHandler">
          <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"/>
        </el-avatar>

      </el-popover>


    </div>
  </div>
</template>

<script>
import axios from "axios";
import {getUserInfo} from "@/API/UserAPI";

export default {
  name: "Header",
  data() {
    return {
      userInfo: {},
    }
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      try {
        let result = await getUserInfo();
        this.userInfo = result.data;
        //todo 这里可以考虑使用下面这句
        //this.user = JSON.parse(localStorage.getItem("userInfo"));
      } catch (error) {
      }
    },
    errorHandler() {
      return true
    },
    loginOut() {
      axios({
        url: '/member/logout',
        method: 'get',
      }).then(resp => {
        if (String(resp.data.code) === '1') {
          localStorage.removeItem('userInfo')
          this.$router.push('/login')
          alert("退出成功！")
        } else {
          alert(resp.data.msg)
        }

      })
    }
  },
}
</script>

<style scoped>


  </style>